(function ($) { 
    $.fn.fullScreen = function(_option) {
        var option = $.extend({target: $('body'), loadMaskColor: '#fff', btnLogoImg:'images/logo2.png', duration: 300, debugMode: true}, _option); 
        option.gallery = this;

    var FullScreen = function() {
      this.container = option.target;
      this.gallery = option.gallery;
      this.btnExit = null;
      this.loadMask = null;
      this.btnLogo = null;

      this.show = function() {
		$(this).trigger('fullscreenShow');
		this.container.css({'overflow': 'hidden'});
		$('html').css({'overflow': 'hidden'});

		this.loadMask.fadeIn(option.duration);
		this.gallery.fadeIn(option.duration, function(){
			$(this).height('auto');
		});
		this.doLayout();
		$(this).trigger('fullscreenShown');
      }
      
      this.hide = function() {
		$(this).trigger('beforehide');
		
		this.gallery.fadeOut(option.duration, function() {
		    $(this).css({ top : '-9999999px', left: '-9999999px'});
		});

		this.loadMask.fadeOut(option.duration, function() {
		    $(this).css({ top : '-9999999px', left: '-9999999px'});
		});

		this.container.css('overflow', this.container.attr('_overflow'));
		$('html').css('overflow', this.container.attr('_overflow'));
		$(this).trigger('fullscreenHidden');
      }

      this.doLayout = function() {
		$(this).trigger('fullscreenApplyLayout');

		 var computedTop = (this.container.height() - this.gallery.height())/2;
         computedTop = computedTop > 0 ? computedTop : 0;
		 var computedLeft = (this.container.width() - this.gallery.width())/2;
         computedLeft = computedLeft > 0 ? computedLeft : 0;

		 this.gallery.css({
			       position: 'absolute',
			       top: computedTop + 'px',
			       left: computedLeft + 'px',
			       zIndex: 9999999
			     });

		 this.loadMask.css({	
				'top': '0px', 
				'left': '0px', 
				'width': '100%', 
				'height': '100%'
				});
      }

      this.container.append(this.gallery);

      var randId = Math.round(Math.random()*100000);
      this.container.append('<div id="loadMask_'+ randId +'" style="position: relative;"></div>')
			   .attr('_overflow', this.container.css('overflow'));

      //$('#loadMask_'+randId).append('<a id="btnExit_' + randId +'" href="#" style="position: absolute; bottom: 10px; right: 10px; pointer: cursor; pointer: hand" alt="exit-full-screen" title="exit-full-screen"><img src="'+ option.btnExitImg +'" width="110" height="16" /></a>')
      $('#loadMask_'+randId)
                    //.append('<a href="/" id="btnLogo_' + randId +'" style="position: absolute; top: 24px; left: 21px;"><img src="'+ option.btnLogoImg +'" width="239" height="66"></img></a>')
					  .append('<div id="debug" style="position: absolute; top: 0px; left: 0px;"></div>')
					  .append('<div id="fs_middle-left-container" style="height:50px;width:80px;"></div><div id="fs_middle-right-container" style="height:50px;width:80px;"></div>');

      this.loadMask = $('#loadMask_'+ randId); 
      this.loadMask.css({
		      position: 'absolute',
		      width: '100%',
		      height: '100%',
		      background: option.loadMaskColor, 
		      display: 'none'
      });

      this.gallery.css({
			'height': '100%', 
			'background': 'none',
			'margin-top': '30px',
      }).hide();
      //this.btnExit = this.loadMask.find('a');
      if (option.debugMode == true) {
	$('#btnLogo_' + randId).hide();
      }else{
	$('#debug').hide();
      }

      this.btnLogo = $('#btnLogo_' + randId).find('>img');
}
    return new FullScreen();
  }
})(jQuery)


